<template>
  <div class="container">
    <div class="message">近7天未完成的服务记录：{{list.length}}条</div>
    <ul class="record_ul">
      <li class="flex record_li" v-for="item in list" :key="item.id" @tap="gotoJiluinfo(item.id)" v-if="list.length > 0">
        <div class="pic">
          <img :src="item.headurl || '/static/imgs/system_user.png'" alt>
        </div>
        <div class="words flex-item">
          <span class="name">{{item.username}}</span>
          <span class="time">服务时间：{{item.addtime}}</span>
          <span class="objects">
            内容服务对象：{{item.guestname}}
            <span class="sex male_icon" v-if="item.sex==0"></span>
            <span class="sex female_icon" v-else></span>
          </span>
        </div>
        <div class="nodo">未完成</div>
      </li>
    </ul>
    <Empty message="暂无服务记录！" v-if="list.length == 0"></Empty>
  </div>
</template>

<script>
import api from '@/utils/api'
import wx from 'wx'
import Toast from '@/utils/toast'
import moment from 'moment'
import Empty from '@/components/empty'
export default {
  data () {
    return {
      list: []
    }
  },
  async onShow () {
    await Promise.all([
      this.getList()
    ])
  },
  components: {
    Empty
  },
  computed: {
  },
  methods: {
    async getList () {
      let ismanage = wx.getStorageSync('userInfo').ismanage;
      let userId = wx.getStorageSync('userInfo').user_id;
      let jsonshop = wx.getStorageSync('userInfo').departmentid;
      let floor = wx.getStorageSync('userInfo').floor;
      const res = await api.getordernojilutodaylist({ jsonshop: jsonshop, floor: floor, ismanage: ismanage, user_id: userId });
      console.log(res)
      if (res) {
        if (res.code === '100') {
          res.data.forEach(item => {
            item.addtime = moment.unix(item.addtime).format('YYYY-MM-DD hh:mm');
          })
          this.list = res.data
        } else {
          this.list = []
          console.log(this.list)
          Toast(res.msg)
        }
      }
    },
    gotoJiluinfo (id) {
      console.log(id)
      wx.navigateTo({
        url: '/pages/guest/serviceRecordInfo/serviceRecordInfo?yejiid=' + id
      })
    }
  }
}
</script>

<style scoped>
.message {
  width: 100%;
  line-height: 48rpx;
  height: 48rpx;
  color: rgba(102, 102, 102, 1);
  font-weight: 400;
  text-align: center;
  font-size: 20rpx;
  background: #fff;
}
.record_ul {
  width: 100%;
  margin-top: 16rpx;
  padding-left: 33rpx;
  background: #fff;
}
.record_ul li {
  width: 100%;
  padding: 23rpx 0;
  background: #fff;
  position: relative;
}
.record_ul li::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2rpx;
  background: rgba(153, 153, 153, 0.1);
}
.record_ul li .pic {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}
.record_ul li .pic img {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
}
.record_ul li .words span {
  display: block;
}
.record_ul li .words .name {
  font-size: 32rpx;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  margin-bottom: 10rpx;
}
.record_ul li .words .time,
.record_ul li .words .objects {
  font-size: 24rpx;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  margin-bottom: 10rpx;
}
.grey_arrow {
  position: absolute;
  top: 50%;
  right: 28rpx;
  transform: translateY(-50%);
  width: 12rpx;
  height: 28rpx;
  background: url(http://mytimg.178mr.com/grey_arrow.png) no-repeat;
  background-size: 100%;
}
.record_ul li .words .objects .sex {
  display: inline-block;
  width: 40rpx;
  height: 40rpx;
  position: relative;
  top: 7rpx;
  margin-left: 4rpx;
}
.sex.male_icon {
  background: url(http://mytimg.178mr.com/male_icon.png) no-repeat;
  background-size: 100%;
}
.sex.female_icon {
  background: url(http://mytimg.178mr.com/female_icon.png) no-repeat;
  background-size: 100%;
}
.record_ul li .nodo {
  position: absolute;
  top: 50%;
  right: 20rpx;
  transform: translateY(-50%);
  width: 90rpx;
  height: 40rpx;
  border: 2rpx solid #ff4444;
  border-radius: 24rpx;
  text-align: center;
  line-height: 40rpx;
  font-size: 24rpx;
  color: #ff4444;
  font-weight: 400;
}
</style>
